import Config from '../utils/Config.js';

/**
 * 功能区组件
 * 负责右侧功能区域的显示和管理
 */
export default class FunctionArea {
    constructor(uiManager) {
        this.uiManager = uiManager;
        this.layout = null;
        this.title = '功能区';
        
        // 洗牌次数管理
        this.shuffleRemaining = 3;  // 剩余洗牌次数
        this.maxShuffleCount = 6;   // 最大洗牌次数
        
        // 提示次数管理
        this.hintRemaining = 5;     // 剩余提示次数
        this.maxHintCount = 5;      // 最大提示次数
        
        // 功能按钮配置（顺序：洗牌 → 提示 → 回滚）
        this.buttons = [
            {
                id: 'shuffle',
                name: '洗牌',
                imageSrc: 'images/r1.png'
            },
            {
                id: 'hint',
                name: '解锁',
                imageSrc: 'images/r2.png'
            },
            {
                id: 'undo',
                name: '回滚',
                imageSrc: 'images/r3.png'
            }
        ];
        
        // 按钮图片缓存
        this.buttonImages = {};
        this.loadButtonImages();
    }

    /**
     * 加载按钮图片
     */
    loadButtonImages() {
        this.buttons.forEach(button => {
            const img = wx.createImage();
            img.onload = () => {
                console.log(`[功能区] 按钮图片加载完成: ${button.name}`);
            };
            img.onerror = () => {
                console.log(`[功能区] 按钮图片加载失败: ${button.name}`);
            };
            img.src = button.imageSrc;
            this.buttonImages[button.id] = img;
        });
    }

    /**
     * 设置布局
     */
    setLayout(layout) {
        this.layout = layout;
        console.log('功能区布局设置:', this.layout);
        this.calculateButtonPositions();
    }

    /**
     * 计算按钮位置（动态自适应布局）
     */
    calculateButtonPositions() {
        if (!this.layout) return;
        
        // 按钮基本尺寸
        const buttonWidth = 80;
        const buttonHeight = 80;
        const textHeight = 20; // 文字区域高度
        const singleButtonTotalHeight = buttonHeight + textHeight; // 单个按钮+文字的总高度 = 100px
        
        // 间距范围限制
        const minSpacing = 20;  // 最小间距，避免按钮过于拥挤
        const maxSpacing = 100; // 最大间距，避免按钮过于分散
        
        // 计算可用高度（去掉顶部标题40px和底部40px）
        const contentHeight = this.layout.height - 120 - 120;
        const verticalPadding = 40; // 上下预留边距
        const availableHeight = contentHeight - verticalPadding * 2;
        
        // 动态计算按钮间距
        const buttonCount = this.buttons.length;
        const totalButtonsHeight = buttonCount * singleButtonTotalHeight;
        const totalSpacingHeight = availableHeight - totalButtonsHeight;
        
        // 计算理想间距（如果只有1个按钮，间距为0）
        let spacing = buttonCount > 1 ? totalSpacingHeight / (buttonCount - 1) : 0;
        
        // 限制间距在合理范围内
        spacing = Math.max(minSpacing, Math.min(maxSpacing, spacing));
        
        // 重新计算实际总高度（基于限制后的间距）
        const actualTotalHeight = totalButtonsHeight + (buttonCount - 1) * spacing;
        
        // 计算起始Y位置，使按钮组在垂直方向居中
        const startY = this.layout.y + 40 + (contentHeight - actualTotalHeight) / 2;
        
        // 按钮在功能区内水平居中
        const startX = this.layout.x + (this.layout.width - buttonWidth) / 2;
        
        // 为每个按钮设置位置
        this.buttons.forEach((button, index) => {
            button.x = startX;
            button.y = startY + index * (singleButtonTotalHeight + spacing);
            button.width = buttonWidth;
            button.height = buttonHeight;
            button.textHeight = textHeight;
        });
        
        console.log(`[功能区] 按钮位置计算完成`);
        console.log(`[功能区] - 按钮数量: ${buttonCount}`);
        console.log(`[功能区] - 按钮间距: ${spacing.toFixed(2)}px`);
        console.log(`[功能区] - 起始位置: (${startX}, ${startY.toFixed(2)})`);
    }

    /**
     * 绘制组件
     */
    render(ctx) {
        if (!this.layout) return;

        const { x, y, width, height } = this.layout;
        
        // 绘制背景
        this.drawBackground(ctx, x, y, width, height);
        
        // 删除标题绘制
        // this.drawTitle(ctx, x, y, width, 40);
        
        // 绘制内容区域
        this.drawContentArea(ctx, x, y + 40, width, height - 40);
        
        // 绘制功能按钮
        this.drawButtons(ctx);
    }

    /**
     * 绘制背景
     */
    drawBackground(ctx, x, y, width, height) {
        // 功能区域不绘制背景，与游戏主背景无缝融合
        // 移除所有背景、边框和占位文字，实现视觉"无感"效果
    }

    /**
     * 绘制标题
     */
    drawTitle(ctx, x, y, width, height) {
        // 标题背景
        ctx.fillStyle = Config.COLORS.PRIMARY;
        ctx.fillRect(x, y, width, height);
        
        // 标题文字
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 14px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(this.title, x + width/2, y + height/2 + 5);
    }

    /**
     * 绘制内容区域
     */
    drawContentArea(ctx, x, y, width, height) {
        // 不绘制背景，与游戏主背景无缝融合
    }

    /**
     * 绘制功能按钮（与GameBoard右侧按钮样式一致）
     */
    drawButtons(ctx) {
        if (!this.buttons || this.buttons.length === 0) return;
        
        this.buttons.forEach((button, index) => {
            if (!button.x || !button.y) return;
            
            const { x, y, width, height } = button;
            const img = this.buttonImages[button.id];
            
            // 绘制按钮图片，保持原图比例，避免拉伸变形
            if (img && img.complete) {
                const imgAspectRatio = img.width / img.height;
                const buttonAspectRatio = width / height;
                
                let drawWidth, drawHeight, drawX, drawY;
                
                if (imgAspectRatio > buttonAspectRatio) {
                    // 图片更宽，以按钮宽度为准
                    drawWidth = width;
                    drawHeight = width / imgAspectRatio;
                    drawX = x;
                    drawY = y + (height - drawHeight) / 2;
                } else {
                    // 图片更高，以按钮高度为准
                    drawHeight = height;
                    drawWidth = height * imgAspectRatio;
                    drawX = x + (width - drawWidth) / 2;
                    drawY = y;
                }
                
                ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
                
                // 如果是洗牌按钮或提示按钮且次数为0，添加灰色遮罩表示禁用
                if ((button.id === 'shuffle' && this.shuffleRemaining === 0) ||
                    (button.id === 'hint' && this.hintRemaining === 0)) {
                    ctx.save();
                    ctx.globalAlpha = 0.6;
                    ctx.fillStyle = '#808080';
                    ctx.fillRect(drawX, drawY, drawWidth, drawHeight);
                    ctx.restore();
                }
            } else {
                // 如果图片未加载，绘制备用按钮
                ctx.fillStyle = '#4CAF50';
                ctx.fillRect(x, y, width, height);
            }
            
            // 如果是洗牌按钮或提示按钮，在右上角显示剩余次数
            if (button.id === 'shuffle' || button.id === 'hint') {
                const badgeRadius = 12;
                const badgeX = x + width - badgeRadius - 5;
                const badgeY = y + badgeRadius + 5;
                
                // 根据按钮类型选择显示的次数
                const remainingCount = button.id === 'shuffle' ? this.shuffleRemaining : this.hintRemaining;
                
                // 绘制红色圆形背景
                ctx.save();
                ctx.fillStyle = '#FF4444';
                ctx.beginPath();
                ctx.arc(badgeX, badgeY, badgeRadius, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制白色边框
                ctx.strokeStyle = '#FFFFFF';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 绘制次数数字
                ctx.fillStyle = '#FFFFFF';
                ctx.font = 'bold 16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(String(remainingCount), badgeX, badgeY);
                ctx.restore();
            }
            
            // 在图片上方偏下位置绘制文字（无论图片是否加载成功都显示）
            ctx.fillStyle = '#FFFFFF';
            ctx.font = 'bold 14px Arial';
            ctx.textAlign = 'center';
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2;
            
            // 计算文字位置：图片底部向上15px的位置
            const textY = y + height - 15;
            
            // 绘制文字描边（增强可读性）
            ctx.strokeText(button.name, x + width / 2, textY);
            
            // 绘制文字填充
            ctx.fillText(button.name, x + width / 2, textY);
        });
    }

    /**
     * 绘制圆角矩形
     */
    drawRoundedRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    }

/**
 * 检查点是否在组件内
 */
isPointInside(x, y) {
    if (!this.layout) {
            console.log(`[FunctionArea] isPointInside: 布局未设置`);
            return false;
        }

        const inside = x >= this.layout.x &&
                      x <= this.layout.x + this.layout.width &&
                      y >= this.layout.y &&
                      y <= this.layout.y + this.layout.height;

        console.log(`[FunctionArea] isPointInside: 点击(${x.toFixed(2)}, ${y.toFixed(2)}) 在区域[${this.layout.x}, ${this.layout.x + this.layout.width}] x [${this.layout.y}, ${this.layout.y + this.layout.height}] 内? ${inside}`);

        return inside;
    }

    /**
     * 处理触摸开始事件
     */
    onTouchStart(x, y) {
        console.log(`[FunctionArea] onTouchStart: 接收到点击(${x.toFixed(2)}, ${y.toFixed(2)})`);
        
        // 检查按钮点击
        for (let button of this.buttons) {
            if (button.x && button.y && button.width && button.height) {
                if (x >= button.x && x <= button.x + button.width &&
                    y >= button.y && y <= button.y + button.height) {
                    console.log(`[FunctionArea] 点击了${button.name}按钮`);
                    this.handleButtonClick(button.id);
                    return true;
                }
            }
        }
        
        return false;
    }

    /**
     * 处理按钮点击
     */
    handleButtonClick(buttonId) {
        console.log(`[FunctionArea] 执行按钮功能: ${buttonId}`);
        
        // 获取GameBoard组件
        const gameBoard = this.uiManager?.components?.gameBoard;
        if (!gameBoard) {
            console.log('[FunctionArea] GameBoard组件未找到');
            return;
        }
        
        switch (buttonId) {
            case 'shuffle':
                console.log('[FunctionArea] 执行洗牌功能');
                
                // 检查剩余次数
                if (this.shuffleRemaining <= 0) {
                    console.log('[FunctionArea] 洗牌次数已用完，无法执行洗牌');
                    // TODO: 可以添加提示UI，告知用户次数已用完
                    return;
                }
                
                // 调用GameBoard的洗牌方法
                if (typeof gameBoard.shuffleCentralCards === 'function') {
                    gameBoard.shuffleCentralCards();
                    
                    // 洗牌成功后，次数减1
                    this.shuffleRemaining--;
                    console.log(`[FunctionArea] 洗牌完成，剩余次数: ${this.shuffleRemaining}/${this.maxShuffleCount}`);
                } else {
                    console.log('[FunctionArea] GameBoard.shuffleCentralCards方法未找到');
                }
                break;
                
            case 'hint':
                console.log('[FunctionArea] 执行提示功能');
                
                // 检查剩余次数
                if (this.hintRemaining <= 0) {
                    console.log('[FunctionArea] 提示次数已用完，无法执行提示');
                    return;
                }
                
                // 获取BattleArea组件
                const battleArea = this.uiManager?.components?.battleArea;
                if (!battleArea) {
                    console.log('[FunctionArea] BattleArea组件未找到');
                    return;
                }
                
                // 扩展备战区容量
                const newCapacity = battleArea.increaseCapacity();
                
                // 提示次数减1
                this.hintRemaining--;
                console.log(`[FunctionArea] 提示功能执行完成`);
                console.log(`[FunctionArea] - 剩余提示次数: ${this.hintRemaining}/${this.maxHintCount}`);
                console.log(`[FunctionArea] - 备战区容量已扩展至: ${newCapacity}`);
                
                // TODO: 后续可添加实际的提示逻辑（如高亮可消除的卡牌组合）
                break;
                
            case 'undo':
                console.log('[FunctionArea] 执行回滚');
                // TODO: 实现回滚功能
                break;
                
            default:
                console.log(`[FunctionArea] 未知按钮: ${buttonId}`);
        }
    }
}
